<template>
    <div>
      <div class="sider-footer">
        <el-button type="info" plain @click="addNewConversation"
          ><svg-icon
            style="width: 22px; height: 22px; margin-right: 8px"
            icon-class="addSession"
          />新建会话</el-button
        >
      </div>
  
      <!--会话根据conversations里面createTime: "2025-03-17 09:53:06" 分成 今天/七日内/30天内/本年/2024年/2023年显示 -->
      <div class="sider-container">
        <div v-for="(conversations, group) in groupedConversations" :key="group">
      <h3>{{ getGroupLabel(group) }}</h3>
      <ul>
        <li
        v-for="conversation in conversations"
        :key="conversation.id"
        class="active"
        >
          <span class="custom-tree-node">
            <el-input
              ref="conversationInput"
              class="conversationInput"
              v-if="editingConversationId === conversation.id"
              v-model="editedTitle"
              @blur="saveEdit(conversation.id)"
              @keyup.enter.native="saveEdit(conversation.id)"
            ></el-input>
            <span
              v-else
              :title="conversation.title"
              class="conversationTitle"
              @click="selectConversation(conversation)"
              >{{ conversation.title }}</span
            >
          </span>
        </li>
      </ul>
    </div>
      </div>
    </div>
  </template>
    
    <script>
  export default {
    data() {
      return {
        // 编辑会话的ID和标题
        editingConversationId: null,
        editedTitle: "",
        conversations:[
            {
                name: 123,
                id:1,
                createTime: "2025-03-17 09:53:06",
            },
            {
                name: 456,
                id:2,
                createTime: "2025-03-17 09:53:06",
            },
            {
                name: 789,
                id:3,
                createTime: "2025-03-17 09:53:06",
            }
        ]
      };
    },
    computed: {
      groupedConversations() {
        const today = new Date();
        const sevenDaysAgo = new Date(today);
        sevenDaysAgo.setDate(today.getDate() - 7);
  
        const thirtyDaysAgo = new Date(today);
        thirtyDaysAgo.setDate(today.getDate() - 30);
  
        const thisYear = today.getFullYear();
  
        const groups = {
        };
  
        this.conversations.forEach((conversation) => {
          const conversationDate = new Date(conversation.createTime);
          if (conversationDate.toDateString() === today.toDateString()) {
            if('today' in groups){
              groups.today.push(conversation);
            }else {
              groups.today = [];
              groups.today.push(conversation);
            };
          } else if (conversationDate >= sevenDaysAgo) {
            if('last7Days' in groups){
              groups.last7Days.push(conversation);
            }else {
              groups.last7Days = [];
              groups.last7Days.push(conversation);
            }
          } else if (conversationDate >= thirtyDaysAgo) {
            if('last30Days' in groups){
              groups.last30Days.push(conversation);
            }else {
              groups.last30Days = [];
              groups.last30Days.push(conversation);
            }
          } else if (conversationDate.getFullYear() === thisYear) {
            if('thisYear' in groups){
              groups.thisYear.push(conversation);
            }else {
              groups.thisYear = [];
              groups.thisYear.push(conversation);
            }
          } else {
            if(conversationDate.getFullYear() in groups){
              groups[conversationDate.getFullYear()].push(conversation);
            }else {
              groups[conversationDate.getFullYear()] = [];
              groups[conversationDate.getFullYear()].push(conversation);
            }
          }
        });
        // console.log("groups", groups);
        return groups;
      },
    },
    methods: {
      getGroupLabel(type) {
      if (type==='today') {
        return '今天';
      } else if (type==='last7Days') {
        return '7天内';
      } else if (type==='last30Days') {
        return '30天内';
      } else if (type==='thisYear') {
        return '今年';
      } else {
        return type +'年';
      }
    },
    
      selectConversation(conversation) {
        // this.$emit("select-conversation", conversation);
      },
      deleteConversation(conversationId) {
        // this.$emit("delete-conversation", conversationId);
      },
      addNewConversation() {
        // this.$emit("change-new-conversation");
      },
    },
  };
  </script>
    
    <style scoped lang="scss">
  ul {
    list-style-type: none;
    padding: 0;
  }
  
  li {
    padding: 0px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    // margin-bottom: 10px;
    .treeBtn{
      display: none;
    }
    &:hover {
      background: rgba(219, 234, 254, 0.4);
      .treeBtn{
        display: flex;
      }
    }
    &.active {
      background-color: #dbeafe;
      .treeBtn{
        display: flex;
      }
    }
  }
  button {
    margin-left: 5px;
  }
  
  .sider-icon {
    cursor: pointer;
  }
  
  .sider-container {
    height: calc(100vh - 176px);
    overflow-y: auto;
    color: #606266;
    padding:0 10px;
    h3{
      color: #B6B6B6;
    }
  }
  
  .sider-footer {
    text-align: left;
    padding: 20px 10px;
    .el-button--info.is-plain {
      // background: #dbeafe;
      background: rgba(64, 158, 255, 1);
      border-radius: 32px 32px 32px 32px;
      border: none;
      color: #fff;
      // color: #409eff;
      padding-left: 20px;
      padding-right: 20px;
      font-size: 16px;
      margin-left: 0;
      span {
        display: flex;
        align-items: center;
      }
    }
  }
  .custom-tree-node {
    position: relative;
    width: 100%;
    .conversationTitle {
      display: inline-block;
      padding: 8px;
      padding-right: 20px;
      width: 100%;
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #262626;
    }
    span:last-child {
      position: absolute;
      right: 0px;
      top: 4px;
    }
  
    .treeBtn {
      border: none;
      transform: rotate(90deg);
      padding: 7px;
      font-size: 14px;
      font-weight: 400;
      border-radius: 12px;
      &:hover {
        background: #ccc;
      }
    }
  }
  </style>
  <style lang="scss">
  .treePopover.el-popover {
    min-width: 100px !important;
  }
  
  .treePopover.el-popover[x-placement^="right"] {
    margin-left: -6px;
    padding: 0;
    width: 100px !important;
    p {
      margin: 10px;
      cursor: pointer;
    }
  }
  .conversationInput {
    .el-input__inner {
      border-radius: 8px;
      padding-left: 8px;
    }
  }
  .sider-footer {
    .el-button--info.is-plain {
      span {
        display: flex;
        align-items: center;
      }
    }
  }
  </style>